<template>
    <div class="detailsComItem">
        <div class="chase">
            <div class="changeChase">
                <van-icon name="star" @click="changeFlat" :class="flat == 1 ? 'active' : ''" /> <span>{{ chaseChange }}</span>
            </div>

            <van-button round @click="numHua(detailsObj, locnum)">第{{ Number(locnum) + 1 || num + 1 }}话</van-button>
        </div>
        <div class="particulars">
            <p>{{ detailsObj.is_finish | getFinish }}</p>
            <div class="relate" ref="relate">
                {{ detailsObj.classic_lines }}
                <span @click="toggleSH(), chaseChange"><van-icon :name="toggle ? 'arrow-up' : 'arrow-down'" /></span>
            </div>
            <div class="chapter">
                <span>全部章节 ( {{ detailsObj.last_ord + 1 }} )</span>
                <div class="allCha" ref="allCha">
                    <ul class="allChaList" v-if="detailsObj.series_info">
                        <li v-for="(item, index) in bOs(detailsObj.series_info.comics, detailsObj.ep_list)" @click="numHua(detailsObj, index)" :key="index">第{{ index + 1 }}章</li>
                        <li @click="showBig = false" v-show="showBig">···</li>
                    </ul>
                </div>
            </div>
            <commentVue :detailsId="detailsObj.id"></commentVue>
        </div>
    </div>
</template>

<script>
import commentVue from "./comment.vue";
export default {
    name: "detailsComItem",
    props: ["detailsObj", "locnum"],
    components: {
        commentVue,
    },

    computed: {
        chaseChange() {
            if (this.detailsObj.id) {
                if (this.flat) {
                    return "已追";
                } else {
                    return "追漫";
                }
            }
        },
        numL() {
            this.num = this.locnum;
            return this.num;
        },
    },
    filters: {
        getFinish(value) {
            if (value == 0) {
                return "连载中";
            } else if (value == 1) {
                return "已完结";
            }
        },
    },
    data() {
        return {
            flat: 0,
            toggle: false,
            showBig: true,
            num: 0,
            username: "",
        };
    },

    methods: {
        changeFlat() {
            if (!localStorage.getItem("pass")) {
                alert("请先登录再收藏!");
                return;
            }
            let changeF = JSON.parse(localStorage.getItem("flat"));
            let eIndex = changeF.findIndex((item) => {
                return item["uid"] == this.detailsObj.id && item["yyid"] == this.username;
            });

            if (this.flat == 0) {
                this.flat = 1;
                changeF[eIndex]["flat"] = this.flat;
                localStorage.setItem("flat", JSON.stringify(changeF));
            } else if (this.flat == 1) {
                this.flat = 0;

                changeF[eIndex]["flat"] = this.flat;
                localStorage.setItem("flat", JSON.stringify(changeF));
            }
        },
        toggleSH() {
            this.toggle = !this.toggle;
            if (this.toggle) {
                this.$refs.relate.style.height = "2.6933rem";
            } else {
                this.$refs.relate.style.height = "0.88rem";
            }
        },
        numHua(x, y = this.num) {
            this.num = y;
            let index = x.ep_list[this.num].id;
            this.$router.push({ path: `/browse/${index}`, query: { id: index, arr: JSON.stringify(x.ep_list), num: this.num, count: x.id } });
        },
        bOs(x, y) {
            if (this.showBig) {
                return x;
            } else {
                this.$refs.allCha.style.height = "100%";
                return y;
            }
        },
    },
    created() {
        if (this.detailsObj.id) {
            let ssFlat = [];
            let iIndex;
            if (localStorage.getItem("loginUser")) {
                this.username = JSON.parse(localStorage.getItem("loginUser")).username;
            } else {
                this.username = "游客";
            }
            if (localStorage.getItem("flat")) {
                ssFlat = JSON.parse(localStorage.getItem("flat"));
                iIndex = ssFlat.findIndex((item) => {
                    return item["uid"] == this.detailsObj.id && item["yyid"] == this.username;
                });
                if (iIndex >= 0) {
                    this.flat = ssFlat[iIndex]["flat"];
                    if (ssFlat[iIndex]["yyid"] != this.username) {
                        if (ssFlat[iIndex]["yyid"] == "游客") {
                            ssFlat[iIndex].yyid = this.username;

                            localStorage.setItem("flat", JSON.stringify(ssFlat));
                        } else {
                            ssFlat.push({ yyid: this.username, uid: this.detailsObj.id, obj: this.detailsObj, flat: 0 });
                            localStorage.setItem("flat", JSON.stringify(ssFlat));
                        }
                    }
                } else {
                    ssFlat.push({ yyid: this.username, uid: this.detailsObj.id, obj: this.detailsObj, flat: 0 });
                    localStorage.setItem("flat", JSON.stringify(ssFlat));
                }
            } else {
                localStorage.setItem("flat", JSON.stringify([{ yyid: this.username, uid: this.detailsObj.id, obj: this.detailsObj, flat: 0 }]));
            }
        }
    },
};
</script>

<style lang="scss" scope>
@import url(../static/style/reset.css);
@import "../static/style/variable.scss";
.detailsComItem {
    margin: 16px;
    background-color: white;
    font-size: 0.4267rem;
    height: auto;
    .chase {
        display: flex;
        justify-content: space-between;
        .changeChase {
            height: 1.1733rem;
            display: flex;
            align-items: center;
            .van-icon {
                color: $color;
                font-size: 0.64rem;
                &.active {
                    color: $activeColor;
                }
            }
            span {
                margin-left: 0.2667rem;
                font-size: 0.48rem;
                line-height: 0.48rem;
                // height: 2.6933rem;
            }
        }
        .van-button {
            width: 5.28rem;
            background: $bgColor;
            color: white;
        }
    }
    .particulars {
        padding-top: 0.4267rem;
        height: 100%;
        p {
            height: 0.5333rem;
            line-height: 0.5333rem;
            padding-bottom: 0.2133rem;
        }
        .relate {
            color: $color;
            font-size: 0.32rem;
            height: 0.88rem;
            line-height: 0.45rem;
            overflow: hidden;
            text-overflow: ellipsis;
            position: relative;
            transition: 0.3s;
            margin-bottom: 0.4rem;
            span {
                position: absolute;
                background-color: white;
                bottom: 0;
                right: 0;
            }
        }
    }
    .chapter {
        width: 100%;
        height: 100%;

        .allCha {
            margin-top: 0.2133rem;

            // height: 2.48rem;
            height: 100%;
            overflow: hidden;
            .allChaList {
                display: flex;
                flex-wrap: wrap;
                li {
                    font-size: 0.3733rem;
                    margin-left: 0.08rem;

                    width: 24%;
                    height: 0.9867rem;
                    border: 1px solid whitesmoke;
                    border-radius: 0.2667rem;
                    box-sizing: border-box;
                    background-color: white;
                    text-align: center;
                    line-height: 0.9867rem;
                    color: $color;
                    margin-top: 0.2133rem;
                }
            }
        }
    }
}
</style>
